<template>
    <versionReportForm v-model:version="searchParams.version" v-model:report="searchParams.report">
        <template #default>
            <el-form-item>
                <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>
        </template>
    </versionReportForm>
    <xTable ref="tableRef" refId="tableRef" :data="pageList" border v-loading="loading" :showCheckBox="false">
        <template #columList>
            <el-table-column label="接口名称" align="left" prop="infName" :show-overflow-tooltip="true" />
            <!-- <el-table-column label="接口编码" align="left" prop="infCode" :show-overflow-tooltip="true" /> -->
            <el-table-column label="接口路径" align="left" prop="infUrl" :show-overflow-tooltip="true" />
            <el-table-column label="方法类型" align="center" prop="infMethod" :show-overflow-tooltip="true">
                <template #default="scope">
                    <dict-tag :options="infMethod" :value="scope.row.infMethod" />
                </template>
            </el-table-column>
            <el-table-column label="执行结果" align="center" prop="result" :show-overflow-tooltip="true">
                <template #default="scope">
                    <dict-tag :options="sys_common_status" :value="scope.row.result" />
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
                <template #default="scope">
                    <el-link type="primary" @click="openDetail(scope.row)" :underline="false">详情</el-link>
                </template>
            </el-table-column>
        </template>
    </xTable>
    <el-dialog :close-on-click-modal="false" draggable="true" title="结果查看" v-model="resultOpen" width="60%"
                append-to-body>
        <el-row>
            <el-col :span="24" >
            <el-descriptions :column="2" border>
                <el-descriptions-item label="版本号:">{{form.version  }}</el-descriptions-item>
                <el-descriptions-item label="测试报告:">{{ form.reportName }}</el-descriptions-item>
                <el-descriptions-item label="接口名称:">{{ form.infName }}</el-descriptions-item>
            </el-descriptions>
            </el-col>
        </el-row>
        <div class="diff-result">
            <JsonEditorVue v-model="form.result"
            style="width: 100%;  height: 70vh; margin-top:5px"
            class="editor"
            :current-mode="code">
            </JsonEditorVue>
        </div>
    </el-dialog>
    <pagination style="margin:20px 0 20px 0" v-show="total > 0" :total="total" v-model:page="pages.pageNum"
        v-model:limit="pages.pageSize" @pagination="getPageList" />
</template>
<script setup>
import JsonEditorVue from 'json-editor-vue3'
import versionReportForm from './versionReportForm'
import { getInfResult } from "@/api/testmanage/compare";
import { isVoid } from "@/utils/util";
const { proxy } = getCurrentInstance();
const { infMethod, sys_common_status } = proxy.useDict("infMethod", "sys_common_status");
const searchParams = ref({
    version: "",
    report: ""
})
const totalList = ref([]);
const total = ref(0);
const pageList = ref([]);
const loading = ref(false);
const resultOpen = ref(false);
const tableData = ref({
    total: 0,
    list: [],
    pageNum: 1,
    pageSize: 10,
})
const form = ref({
    version: '',
    reportName: '',
    infName: '',
    result: ''
})
const pages = ref({
    pageSize: 20,
    pageNum: 1,
})
const getList = () => {
    if (isVoid(searchParams.value.report)) {
        proxy.$modal.msgError("请选择报告");
        return
    }
    loading.value = true
    var id = searchParams.value.report
    getInfResult(id).then(response => {
        if (response.code === 200) {
            totalList.value = response.result
            total.value = totalList.value.length
        } else {
            proxy.$modal.msgError("查看失败");
        }
        loading.value = false
        getPageList()
    })
}
const openDetail = (row) => {
    resultOpen.value = true
    form.value = row.resultView
    if(Object.prototype.toString.call(row.resultView.result) === "[object String]"){
      form.value.result = JSON.parse(row.resultView.result);
    }
    form.value.infName = row.infName
}

// 前端分页
function getPageList() {
    pageList.value = proxy.lsh.slice(proxy.lsh.cloneDeep(totalList.value),(pages.value.pageNum-1)*pages.value.pageSize,pages.value.pageNum*pages.value.pageSize);
}
</script>